%h1 Overlay tests

%ul
  %li
    %a#new-overlay{:href => '#'}
      Open new overlay
  %li
    %a#new-mask{:href => '#'}
      Open mask
  %li
    %a#center-fade{:href => '#'}
      Center an overlay then fade it in
  %li
    %a#fit-and-zoom{:href => '#'}
      Fit to content and zoom in
  %li
    %a#animated-fit{:href => '#'}
      Animated fitting

%button#mover Move the overlay
%button#filler Fill with too much content and resize

=javascripts 'test/overlays'

:plain
  <style type="text/css">
        .overlay-container { background: #999; color: #fff; font: 14px Arial, sans-serif; padding: 140px; }
        .overlay-content { padding: 40px; }
        .has-class-name { background: #900; }
        
        .tooltip { background: none; }
        .tooltip .overlay-content { border: 1px solid #333; background: #fc6; color: #000; font-size: 10px Arial, sans-serif; padding: 6px 12px; height: 12px; }
  </style>
